import React from 'react';
import '../css/Cart.css';
import { InputNumber } from 'antd';


import $ from 'jquery';
import { HashRouter as Router,Route,NavLink,Prompt} from 'react-router-dom';
function onChange(value) {
	console.log('changed', value);
  }

  function getCookie(name){
	var str = document.cookie;
	var arr = str.split("; ");
	for(var i = 0; i < arr.length; i++){
		var arr1 = arr[i].split("=");
		if(arr1[0]==name){
			return arr1[1];
		}
	}
}
function setCookie(name,val,n){
	var oDate = new Date();
	oDate.setDate(oDate.getDate()+n);
	document.cookie = name + "=" + val + ";expires="+ oDate ;
}
function removeCookie(name){
	setCookie(name,1,-1);
}
var tokens=getCookie("token")
console.log(Number(tokens)); 

class Cart extends React.Component{
	constructor(props){
		super(props)
		this.state={
			clist:[],
			isshow:false,
			all:[]
		}
	}
	qulogin(){
		this.props.history.push('/login')
	}
	
	remove(all){
		console.log(tokens)
		
		console.log(this.state.all.length)
		var _this=this;
		if(_this.state.all.length<=0){
			alert("购物车为空，无法删除")
			window.location.href="#/cart"	
		}else{
			for(let i =0;i<_this.state.all.length;i++){
				(function(i){
					$.ajax({
						type:'get',
						url:'http://jx.xuzhixiang.top/ap/api/cart-delete.php',
						data:{uid:Number(tokens),pid:_this.state.all[i]}
					}).then((data)=>{
						//console.log(data)
						
						
					})
				})(i);
			}
			alert("全部删除成功")
			window.location.reload()	
		}
		
		
	}
	
	
	
	render(){
		console.log(this.state.clist)
			if(!tokens){
				return(
					<div  className="main-a">
						<header class="head"><span class="left">购物车</span><p class="rights" id="rights">管理</p></header>
						<div class="cartkong">请您先<button onClick={this.qulogin.bind(this)}>登录</button></div>
					</div>	
				)
			
			}
		if(this.state.clist.length<=0){
			return(
				<div  className="main-a">
					<header class="head"><span class="left">购物车</span><p class="rights" id="rights">管理</p></header>
					<div class="cartkonga">您的购物车空空如也，赶紧去添加吧。</div>
				</div>	
			)
	
	}else{


		return(
			
			<div class="main-a">
				<header class="head"><span class="left">购物车</span><p class="rights" id="rights">管理</p></header>
				<div class="main-c">
					<div class="box-c">
						
						{
							this.state.clist.map(function(item,i){
								var num=item.pprice*item.pnum
								return(
									<div class="list-c">
										
										<input type="checkbox" name="ral" class="button-c"></input>
										<p class="first-p"><img src={item.pimg} /></p>
										<div class="last-p">
										<NavLink to={"/detail/"+item.pid}><p class="pname">{item.pname}</p></NavLink>
											<p class="p-bottom">
												<span class="pprice">￥{num}</span>
												
												<InputNumber min={1} max={200} defaultValue={item.pnum} onChange={onChange} />
												
											</p>
										</div>
									
									</div>
								)
							})
						}
					
					</div>
					
				
				
					
				
				
				
					
					<div class="hide-c" id="hide-c">
					<input type="checkbox" name="ral" class="button-b"></input><span class="quanbu">全选</span>
					<p class="money-c">合计:<span>￥236.00</span></p>
					<button class="jiesuan" >结算</button>
					<button class="shanchu" onClick={this.remove.bind(this)}>删除</button>


					</div>
				</div>
			</div>	
		)
	 }	
	}
	componentWillMount(){
		var _this=this
        $.ajax({
			type:"get",
			url:"http://jx.xuzhixiang.top/ap/api/cart-list.php",
			data:{id:Number(tokens)},
			async:false,
			dataType:'json',
			success:function(data){
				console.log(data)
				
				// _this.setState({clist:data.data})
					var cart=[];
					for(var i=0;i<data.data.length;i++){
						cart.unshift(data.data[i])
					}
					_this.setState({clist:cart})
					
					console.log(cart)

					for(var j=0;j<cart.length;j++){
						_this.state.all.push(Number(cart[j].pid))
					}
					console.log(_this.state.all)
				
			}
		})
    


		
		$(function(){
			console.log("bb")

		
			$('.rights').click(function(){
				if($('.hide-c').is(':hidden')){
					$('.hide-c').show();
				
				}else{
					$('.hide-c').hide()
				}
			

			})
		})
			$(function(){
				// console.log("aaa")

				$('.button-b').click(function(){
					// console.log("aaa")
				if($('.button-b').is(':checked')){
				$('.button-c').prop('checked',true);
				}else{
				$('.button-c').prop('checked',false);
				} 
				});
				$('.button-c').click(function(){
				var i = 0;
				var arr = $('.button-c').length;
				$('.button-c').each(function(){	
				if($(this).is(':checked')){
				i++;
				};	
				});
				if(i == arr){
				$('.button-b').prop('checked',true);
				}else{
				$('.button-b').prop('checked',false);
				}
		
				});
		});
		
	}

}
export default Cart